<template>
  <div :style="{'padding-bottom': show ? '150px' : 0}">
    {{mobileError.message}}
    <k-form :model="model" :rules="rules" ref="form" style="margin-bottom: 12px">
      <k-form-item prop="citys">
        <picker
          v-model="model.citys"
          :data="address"
          @on-change="model.address = []"
          @on-hide="show = false"
          @on-show="pickerShow"
          placeholder="选择城市"
        />
      </k-form-item>
      <k-form-item prop="address" :errorValid="addressError">
        <store-picker
          @result="handleStoreResult"
          @on-hide="show = false"
          @on-show="pickerShow"
          :selectTitle="'请选择专柜'"
          :holder="'选择专柜'"
          :list="counters"
        ></store-picker>
      </k-form-item>
      <k-form-item prop="name" :errorValid="nameError">
        <k-form-item-input type="text" max-length="18" v-model="model.name" placeholder="姓名"/>
      </k-form-item>
      <k-form-item prop="mobile" :errorValid="mobileError">
        <k-form-item-input
          type="number"
          max-length="11"
          v-model.number="model.mobile"
          placeholder="手机号码"
          @change="handleMobileChange"
          @blur="handleMobileBlur"
        />
      </k-form-item>
      <k-form-item prop="code" :errorValid="codeError">
        <k-form-item-input
          type="number"
          v-model="model.code"
          placeholder="验证码"
          showCode
          :codeDisabled="codeDisabled"
          :codeRetry="codeRetry"
          :text="text"
          @change="setCodeError"
          @getCode="getCode(model.mobile)"
        />
      </k-form-item>
    </k-form>
    <k-button style="margin-top: 12px" :loading="loading" @click="submit">确认</k-button>
  </div>
</template>

<script>
import KForm from "@/components/Form";
import KFormItem from "@/components/FormItem";
import KFormAlert from "@/components/FormAlert";
import KFormItemInput from "@/components/FormItemInput";
import KButton from "@/components/Button";
import Picker from "@/components/Picker";
import StorePicker from "@/components/StorePicker";
import { Actionsheet } from "vux";
import currentAddress from "@/datas/current_address.json";
import storeAddress from "@/datas/store_address.json";
import {
  mobileMixin,
  codeMixin,
  nameMixin,
  addressMixin,
  toolsMixin,
  mixin
} from "@/mixin";
import utils from "@/utils";
import * as Api from "@/service";
import FastClick from "fastclick";
export default {
  components: {
    KForm,
    KFormItem,
    KButton,
    KFormItemInput,
    KFormAlert,
    Picker,
    StorePicker
  },
  mixins: [mobileMixin, codeMixin, nameMixin, addressMixin, toolsMixin, mixin],
  data() {
    return {
      model: {
        name: "",
        mobile: "",
        code: "",
        citys: [],
        address: [],
        type: 0,
        orderType: "0"
      },
      address: currentAddress,
      show: false,
      loading: false,
      rules: {
        name: {
          required: true,
          message: "请填写姓名"
        },
        mobile: {
          required: true,
          message: "请填写手机号码"
        },
        code: {
          required: true,
          message: "请填写验证码"
        },
        citys: {
          required: true,
          message: "请选择省/市",
          type: "array"
        },
        address: {
          required: true,
          message: "请选择柜台",
          type: "array"
        }
      }
    };
  },
  computed: {
    counters() {
      return storeAddress.filter(item => item.parentId === this.model.citys[1]);
    }
  },
  mounted() {
    // this.fastClickRegister();
    // this.getCrmUser();
  },
  methods: {
    pickerShow() {
      this.show = true;
      this.$nextTick(() => {
        document.getElementById("app").scrollTo(0, 500);
      });
    },
    formatData() {
      let {
        name,
        mobile,
        code: authCode,
        address,
        type,
        orderType,
        openId
      } = this.model;
      [address] = this.counters.filter(item => item.value === address[0]);
      const storeId = address.value;
      const storeName = address.name;
      const [provice] = this.address.filter(
        item => item.value == this.model.citys[0]
      );
      const [city] = this.address.filter(
        item => item.value == this.model.citys[1]
      );
      const channel = utils.queryString().channel
        ? utils.queryString().channel
        : "other";
      address = `${provice.name} ${city.name} ${address.address}`;
      type = localStorage.getItem("camellia-sample-type");
      let model = {
        name,
        mobile,
        authCode,
        address,
        channel,
        storeId,
        storeName,
        orderType,
        type: utils.getChannelInfo().type,
        sampling: "香奈儿山茶花润泽水感乳液"
      };
      return model;
    },
    handleStoreResult(val) {
      this.model.address = val;
    },
    fastClickRegister() {
      FastClick.attach(document.querySelector(".select-city"));
      let inputAll = document.querySelectorAll(".form-item-input");
      for (var i = 0; i < inputAll.length; i++) {
        FastClick.attach(inputAll[i]);
      }
      FastClick.attach(document.querySelector("button"));
    }
  }
};
</script>
